<template>
  <view class="goods_detail">
   
    <!-- 轮播图 -->
    <view class="wrap">
      <u-swiper
        :list="list"
        name="pics_big_url"
        height="497"
        img-mode="aspectFit"
        bg-color="#fff"
        @click="clickFn"
      ></u-swiper>
    </view>

  
    <!-- 商品详情 -->
    <view class="description">
      <view class="price">${{ price }}</view>
      <view class="name">{{ name }}666</view>
    </view>

    <!-- 分割线 -->
    <view class="line"></view>
    

    <!-- 富文本 -->
    <view class="top_text">图文详情</view>
    <!-- <rich-text nodes="{{html_con}}"></rich-text> -->
    <u-parse :html="html"></u-parse>

    <!-- 底部商品导航 -->
    <view class="butt_nav">
      <uni-goods-nav
        :fill="true"
        @click="onClick"
        @buttonClick="buttonClick"
        :options="options"
      />
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  //得到购物车的长度
  computed: {
    ...mapGetters("cart", ["cart_count"]),
  },
  data() {
    return {
      list: [],
      src_list: [],
      price: "",
      name: "",
      html: "",
      // 商品详情对象
      goods_info: {},

      // 左侧按钮组的配置对象
      options: [
        {
          icon: "shop",
          text: "店铺",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 0,
        },
      ],
      // 右侧按钮组的配置对象
      buttonGroup: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ],
    };
  },
  onLoad({ goods_id }) {
    this.goods_info = [];
    goods_id = goods_id || 33333;
    this.getGoodsDetail(goods_id);
  },

  onReady() {
    //获取购物车数量
    this.options.forEach((item) => {
      if (item.icon == "cart") {
        //更改为商品总数量        
        item.info = this.cart_count;
      }
    });
  },

  methods: {
    //点击底部右侧按钮
    buttonClick(e) {
      console.log(e);
      if (e.content.text === "加入购物车") {
        //调用vuex的加入购物车方法 传入商品数据
        this.$store.commit("cart/addCart", this.goods_info);
        //  console.log(this.$store.state.cart.cart);
        //给购物车info属性赋值
        this.options.forEach((item) => {
          if (item.icon == "cart") {
            item.info = this.cart_count;
          }
        });
        // console.log(this.$store.state.cart.hell);

      }
    },
    //点击底部左侧按钮触发
    onClick(e) {
      // console.log(e);
      //判断点击是购物车按钮
      if (e.content.text === "购物车") {
        //跳转至购物车页面
        uni.switchTab({
          url: "/pages/cart/cart",
        });
      }
    },
    //点击轮播图
    clickFn(index) {
      console.log(index);
      //小程序图片预览
      uni.previewImage({
        urls: this.src_list,
        current: index,
      });
    },
    //获取商品详情
    async getGoodsDetail(goods_id) {
      const res = await this.$u.get("/goods/detail", { goods_id });
      console.log(res);
      //数据筛选返回给list
      this.list = res.pics;
      //将图片地址组成的列表返回
      this.src_list = this.list.map((item) => item.pics_big_url);
      //价格
      this.price = res.goods_price;
      //名称
      this.name = res.goods_name;
      //富文本
      this.html = res.goods_introduce;
      //商品详情
      this.goods_info = res;
    },
  },
};
</script> 

<style >
.description {
  margin: 20rpx 35rpx 48rpx 35rpx;
}
.price {
  font-weight: 700;
  color: crimson;
  margin-bottom: 19rpx;
  font-size: 35rpx;
}
.name {
  font-weight: 700;
}
.line {
  width: 100%;
  height: 20rpx;
  background-color: #f9f9f9;
}
.top_text {
  margin-top: 20rpx;
  text-align: center;
  font-weight: 700;
}
.butt_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
}
.goods_detail {
  padding-bottom: 50px;
}
</style>